<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			})
		</script>
	</head>
	<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->
	<body>
		<header class="detail-header fixed-header">
			<a href="javascript:history.go(-1)"><img src="images/detail-left.png" /></a>

			<a href="shopcar.html" class="right"><img src="images/shopbar.png" /></a>
		</header>


		<div class="contaniner fixed-contb">
			<section class="detail">
				<figure class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide">
							<a href="#">
								<img src="images/000.jpg" />
							</a>
						</li>
						<li class="swiper-slide">
							<a href="#">
								<img src="images/000.jpg" />
							</a>
						</li>
						<li class="swiper-slide">
							<a href="#">
								<img src="images/000.jpg" />
							</a>
						</li>
						<li class="swiper-slide">
							<a href="#">
								<img src="images/000.jpg" />
							</a>
						</li>
					</ul>
					<div class="swiper-pagination">
					</div>
				</figure>
				<dl class="jiage">
					<dt>
						<h3>何林霞：我的小裙子时尚时尚最时尚~淦！</h3>
						<div class="collect">
							<img src="images/detail-heart-hei.png" />
							<p>收藏</p>
						</div>
					</dt>
					<dd>
						<b>￥99.99</b>
						<del>￥139</del>
						<input type="button" value="￥5.00" readonly />
						<small>+356积分</small>
					</dd>
				</dl>

				<div class="chose">
					<ul>
						<h3>颜色</h3>
						<li>
							黑色
						</li>
						<li>
							粉色
						</li>
						<li>
							灰色
						</li>
						<li>
							红色
						</li>
					</ul>
					<ul>
						<h3>尺寸</h3>
						<li>
							L
						</li>
						<li>
							XL
						</li>
						<li>
							XXL
						</li>
					</ul>
				</div>

				<a href="#" class="seven">
					<b>7</b>天无理由退换货
					<span id="sss"></span>
				</a>

				<ul class="same">
					<a href="#">
						<span>
							你也许会喜欢
						</span>
						<li class="one">
							<img src="images/000.jpg" />
							<p>￥999.00</p>
						</li>
						<li>
							<img src="images/000.jpg" />
							<p>￥199.00</p>
						</li>
						<li>
							<img src="images/000.jpg" />
							<p>￥89.00</p>
						</li>
						<li>
							<img src="images/000.jpg" />
							<p>￥481.00</p>
						</li>
					</a>
				</ul>

				<article class="detail-article">
					<nav>
						<ul class="article">
							<li id="talkbox1" class="article-active">商品详情</li>
							<li id="talkbox2">评价</li>
						</ul>
					</nav>

					<section class="talkbox1">
						<p>啊这 <br />我<br />也<br />不<br />知<br />道<br />说<br />什<br />么<br />好啊  <br />去看右边的评论吧~<br /><br /><br /></p>
					</section>

					<section class="talkbox2" style="display: none;">
						<ul class="talk">
							<li>
								<figure><img src="images/touhe.jpg" /></figure>
								<dl>
									<dt>
										<p>何林霞</p>
										<time>2021-05-24</time>
										<div class="star">
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
										</div>
									</dt>
									<dd>龙不吟 虎不啸 小小喷子可笑可笑</dd>
									<small>颜色：粉色</small>
									<div class="picbox">
										<img src="images/000.jpg" />
										<img src="images/000.jpg" />
										<img src="images/000.jpg" />
										<img src="images/000.jpg" />
									</div>
								</dl>
							</li>
							<li>
								<figure><img src="images/toulu.jpg" /></figure>
								<dl>
									<dt>
										<p>卢周</p>
										<time>2021-05-14</time>
										<div class="star">
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
										</div>
									</dt>
									<dd>刀不锋利马太瘦，你拿什么跟我斗</dd>
									<small>颜色：黑色</small>
									
								</dl>
							</li>
							<li>
								<figure><img src="images/touda.jpg" /></figure>
								<dl>
									<dt>
										<p>达娃卓嘎</p>
										<time>2021-05-10</time>
										<div class="star">
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
										</div>
									</dt>
									<dd>就这？就这啊？</dd>
									<small>颜色：灰色</small>
								</dl>
							</li>
							<li>
								<figure><img src="images/touhuang.jpg" /></figure>
								<dl>
									<dt>
										<p>黄巧</p>
										<time>2021-05-07</time>
										<div class="star">
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
										</div>
									</dt>
									<dd>就这？就这啊？</dd>
									<small>颜色：红色</small>
									
								</dl>
							</li>
							<li>
								<figure><img src="images/toume.jpg" /></figure>
								<dl>
									<dt>
										<p>林茂</p>
										<time>2021-05-01</time>
										<div class="star">
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn01.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
											<span><img src="images/detail-iocn001.png" /></span>
										</div>
									</dt>
									<dd>就这？就这啊？</dd>
									<small>颜色：黑色</small>

								</dl>
							</li>
						</ul>
					</section>

				</article>
			</section>
		</div>


		<footer class="detail-footer fixed-footer">
			<a href="#" class="go-car">
				<input type="button" value="加入购物车" />
			</a>
			<a href="buy.html" class="buy" >
				立即购买
			</a>
		</footer>

		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).scroll(function() {
				if ($(".detail-header").offset().top > 50) {
					$(".detail-header").addClass("change");
				} else {
					$(".detail-header").removeClass("change");
				}
			});
		</script>
		<script src="js/swiper.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					speed: 1000,
					autoplay: 2000,
					pagination: '.swiper-pagination',
				});
			})
		</script>
		<script type="text/javascript">
			$(function() {
				$('.chose li').click(function() {

					$(this).addClass('chose-active').siblings().removeClass('chose-active');

					var tags = document.getElementsByClassName('chose-active'); //获取标签

					var tagArr = "";
					for (var i = 0; i < tags.length; i++) {
						tagArr += tags[i].innerHTML; //保存满足条件的元素

					}

					$('#sss').html(tagArr);

				});

				$('.article li').click(function() {

					$(this).addClass('article-active').siblings().removeClass('article-active');
					if ($(this).attr("id") == "talkbox1") {
						$('.talkbox1').show();
						$('.talkbox2').hide();
					} else {
						$('.talkbox2').show();
						$('.talkbox1').hide();
					}

				});
			});
		</script>
	</body>
</html>
